<template>
  <div class="content">
    <cus-search class="mb_20" :showTitle="false">
      <cus-search-item>
        <Form ref="formValidate" :model="form" :label-width="80">

          <FormItem class="mr_48 mb_20" label="更新时间" prop="updateTime">
            <DatePicker transfer v-model="form.updateTime" format="yyyy-MM-dd" type="daterange" placement="bottom-end"
              placeholder="请选择更新时间" style="width: 200px"></DatePicker>
          </FormItem>

          <FormItem label="生效日期" prop="supplyTime" class="mr_48 mb_20">
            <DatePicker v-model="form.supplyTime" format="yyyy-MM-dd" type="daterange" placement="bottom-end"
              placeholder="请选择生效日期" style="width: 200px"></DatePicker>
          </FormItem>

          <FormItem label="食材名称" prop="ingredientsName" class="mr_48 mb_20">
            <Input v-model="form.ingredientsName" maxlength="20" clearable placeholder="请输入食材名称" style="width: 200px">
            </Input>
          </FormItem>

          <FormItem label="区域" prop="kitchenArea" class="mr_48 mb_20">
            <Select v-model="form.kitchenArea" style="width: 200px">
              <Option v-for="item in areaList" :key="item.kitchenArea" :value="item.kitchenArea">{{ item.kitchenAreaName
              }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="供应商名称"  class="mr_48 mb_20" prop="supplyName" :label-width="100">
            <Input v-model="form.supplyName" maxlength="20" clearable placeholder="请输入供应商名称" style="width: 200px">
            </Input>
          </FormItem>
          <FormItem label="食材种类" class="mr_48 mb_20" prop="ingredientsTypeName">
            <Select v-model="form.ingredientsTypeName" style="width: 200px" placeholder="请选择食材种类" clearable>
              <Option :value="item.name" v-for="(item, index) in materialTypeList" :key="index">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <cusButton class="mr_20 mb_20" type="primary" @onClick="
            pages.page = 1;
          onInit();
                      ">查询</cusButton>
          <cusButton type="default" @onClick="reset()" class="mb_20">重置</cusButton>

        </Form>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">
      <div class="tableBox">
        <cus-table border :loading="loading" :columns="columns" :data="data" :bottomClass="['cus-page']">
          <template slot-scope="{ row }" slot="weightFlag">
            <div>{{ row.weightFlag == 0 ? "否" : "是" }}</div>
          </template>
          <template slot-scope="{ row }" slot="createTime">
            <div>{{ row.createTime | formatTime }}</div>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <Button class="mr_20" type="primary" size="small" :style="{ color: '#ffffff', margin: 'auto' }"
              @click="onDetail(row)">详情</Button>
          </template>
        </cus-table>
        <div class="cus_page">
          <cus-page :data="pages" class="mt_20" @pageChange="selectNewestHistoricalPriceApi()"></cus-page>
        </div>
      </div>
    </div>

    <!-- 详情 -->
    <detailHistoryModal ref="detailHistoryModal"></detailHistoryModal>
  </div>
</template>

<script>
import {
  selectNewestHistoricalPrice,
  localfoodtype,
} from "@/api/organ/dishesModule";
import detailHistoryModal from "./components/detailHistoryModal";

export default {
  components: { detailHistoryModal },
  data() {
    return {
      ruleValidate: {},
      form: {
        ingredientsName: "", // 供应商
        supplyName: "", // 供应种类
        updateTime: [],
        supplyTime: [],
        ingredientsTypeName: "",
        kitchenArea: this.$store.state.selectList.areaList[0].kitchenArea, // 区域
      },
      materialTypeList: [],
      loading: false,
      areaList: this.$store.state.selectList.areaList,  //区域列表
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "食材种类",
          key: "ingredientsTypeName",
          align: "center",
        },
        {
          title: "食材名称",
          key: "ingredientsName",
          align: "center",
        },
        {
          title: "供应商",
          key: "supplyName",
          align: "center",
        },
        {
          title: "计量单位",
          key: "model",
          align: "center",
        },
        {
          title: "最新价格",
          key: "originalPrice",
          align: "center",
        },
        // {
        //   title: "称重入库",
        //   slot: "weightFlag",
        //   align: "center",
        // },
        {
          title: "区域",
          key: "kitchenAreaName",
          align: "center",
        },
        {
          title: "更新时间",
          width: 120,
          slot: "createTime",
          align: "center",
        },
        {
          title: "生效日期",

          key: "supplyDate",
          align: "center",
        },
        {
          title: "商品条形码",
          key: "snCode",
          align: "center",
        },
        {
          title: "品牌",
          key: "brand",
          align: "center",
        },
        {
          title: "来源",
          key: "source",
          align: "center",
        },
        {
          title: "操作",
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  mounted() {
    this.onInit();
    this.localfoodtypeApi();
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 383; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 383; // 表格自适应高度
        console.log(this.tableHeight);
      }, 100);
    },
    // 初始化
    onInit() {
      this.selectNewestHistoricalPriceApi();
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.onInit();
    },
    // 详情
    onDetail(row) {
      console.log(111);
      this.$refs["detailHistoryModal"].form.ingredientsId = row.ingredientsId;
      this.$refs["detailHistoryModal"].form.kitchenArea = row.kitchenArea
      this.$refs["detailHistoryModal"].show();
    },
    // 查询最新一条历史价格
    selectNewestHistoricalPriceApi() {
      this.loading = true;
      return new Promise((resolve) => {
        selectNewestHistoricalPrice({
          ingredientsName: this.form.ingredientsName || null,
          supplyName: this.form.supplyName || null,
          kitchenArea: this.form.kitchenArea,
          ingredientsTypeName: this.form.ingredientsTypeName || null,
          startDate: this.form.updateTime[0]
            ? new Date(this.form.updateTime[0]).Format("yyyy-MM-dd")
            : null,
          stopDate: this.form.updateTime[1]
            ? new Date(this.form.updateTime[1]).Format("yyyy-MM-dd")
            : null,
          supplyStartDate: this.form.supplyTime[0]
            ? new Date(this.form.supplyTime[0]).Format("yyyy-MM-dd")
            : null,
          supplyStopDate: this.form.supplyTime[1]
            ? new Date(this.form.supplyTime[1]).Format("yyyy-MM-dd")
            : null,
          current: this.pages.page,
          size: this.pages.pageSize,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 获取食材种类
    localfoodtypeApi() {
      return new Promise((resolve) => {
        localfoodtype({}).then((res) => {
          if (res.code === 1) {
            this.materialTypeList = res.data;
            resolve();
          }
        });
      });
    },
  },
};
</script>
<style scoped>
/deep/.ivu-input-icon {
  height: 32px !important;
  line-height: 32px !important;
}
</style>
<style lang="less" scoped>
.content {

  // padding: 20px;
  &-bottom {
    background: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
    padding: 20px;
  }
}

.formBox {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
  padding: 20px 20px 1px;
  display: flex;
  flex-wrap: wrap;

  &-item {
    margin-right: 48px;
  }
}

.mr_20 {
  margin-right: 20px;
}

.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

::v-deep .ivu-table-wrapper-with-border {
  border-radius: 6px;
}
</style>
